<template>
  <div class="container-fluid">
    <!--书名 -->
    <div class="part">
      <div class="center d-flex justify-content-between">
        <div class="left d-flex">
          <a href="#" class="photo">
            <img src="/img/tbfml.jpg" alt="" />
          </a>
          <a href="#" class="wenzi">
            <div>
              <span>太白封魔录</span>
            </div>
            <div>历史小说</div>
          </a>
        </div>
        <div class="right d-flex">
          <div>作者于2021-06-24定价</div>
          <a href="#">开启自动购买</a>
          <button>购买</button>
        </div>
      </div>
    </div>
    <!-- 正文区 -->
    <div class="zwq" v-for="(item,i) of currentPageData" :key="i">
      <!-- 标题 -->
      <h1 >{{item.c_name}}</h1>
      <!-- 作者的头像  日期  笔名 -->
      <div class="author">
        <img src="/img/tx.jpg" alt="" />
        <span>恩佐斯焗饭</span>
        <span>2021-04-15</span>
      </div>
      <!-- 正文区 -->
      <div class="zw">
        <p v-for="(p,i) of item.title.split(' ')" :key="i">{{p}}</p>
      </div>
      <!-- 右侧导航栏 -->
      <div class="navr">
        <!-- 转发 -->
        <div class="d-flex">
          <div class="left d-flex">
            <span>分享到：</span>
            <a href="">
              <img src="/img/豆瓣.png" alt="" /><img
                src="/img/微信.png"
                alt=""
              /><img src="/img/微博.png" alt="" /><img
                src="/img/QQ.png"
                alt=""
              /><img src="/img/QQ空间.png" alt="" />
            </a>
          </div>
          <div>
            <a href="#">
              <img src="/img/转发.png" alt="" />
            </a>
          </div>
        </div>
        <div  class="anniu">
        <div>
          <a href="">
            <img src="/img/送花.png" alt="" />
          </a>
        </div>
         <div>
          <a href="">
            <img src="/img/讨论.png" alt="" />
          </a>
        </div>
        <div>
          <a href="">
            <img src="/img/加入书架.png" alt="" />
          </a>
        </div>
        <div>
          <a href="">
            <img src="/img/推荐票.png" alt="" />
          </a>
        </div>
       </div>
       </div>
      <div class="xiabian">
        <!-- 送花 -->
          <div>
            <a href=""><span>送花</span></a>
          </div>
        <!-- 讨论 -->

        <div>
          <a href="#"><span>讨论</span></a>
        </div>

        <!-- 加入书架 -->

        <div>
          <a href=""><span>加入书架</span> </a>
        </div>

        <!-- 推荐票 -->

        <div>
          <a href=""><span>推荐票</span></a>
        </div>
      </div>
      <!-- 作者最后修订时间 -->
      <div class="deadline">
        <p>*作者最后修订时间：2021-05-05</p>
        <p>©版权所有，侵权必究</p>
        <p>由 恩佐斯焗饭 授权豆瓣阅读全球范围内电子版制作与发行。</p>
      </div>
      <!-- 作者的话 -->
      <div class="talk">
        <h5>作者的话</h5>
      </div>
      <div class="zz2 left d-flex">
        <a href="#" class="photo">
          <img src="/img/tx.jpg" alt="" />
        </a>
        <a href="#">
          <div class="wenzi2">
            <span>恩佐斯焗饭</span>
            <span>本文作者</span>
            <span>05-27</span>
          </div>
          <div class="syq">欢迎加入书友交流群885479116</div>
        </a>
      </div>
      <div class="sh d-flex justify-content-center">
        <!-- 左边送花 -->
        <div>
          <a href="">
            <img src="/img/hua.jpg" alt="" />
            <div>送花</div>
          </a>
        </div>
        <!-- 右边推荐票 -->
        <div>
          <a href="">
            <img src="/img/tjp.jpg" alt="" />
            <div>推荐票</div>
          </a>
        </div>
      </div>
    </div>

   <!-- 上下篇切换 -->
    <div class="button " >
     <a  @click="prev" v-if="currentPage>1" class="syp"><span>上一篇</span></a>
      <a  v-else  style="background-color:#ddd;cursor:default" @click="prev1" ><span>上一篇</span></a>
      <a @click="next1" v-if="currentPage==textPage" style="background-color:#ddd;cursor:default"><span>下一篇:</span></a>
      <a @click="next"  v-else  class="xyp" ><span>下一篇:</span></a>
    </div>
    <div class="tips" v-show="ok"><span>没有上一篇了</span></div>
    <div class="tips" v-show="ok1"><span>没有下一篇了</span></div>
    <!-- 专栏信息 -->
    <div class="zlxx">
      <div>专栏信息</div>
      <div class="smz d-flex">
        <a href="#" class="photo">
          <img src="/img/tbfml.jpg" alt="" />
        </a>
        <a href="#" class="wenzi">
          <div>
            <span>太白封魔录</span>
          </div>
          <div>历史小说</div>
        </a>
      </div>
    </div>

    <!-- 作者 -->
    <div class="zz1">
      <div>作者</div>
      <div class="d-flex">
        <div>
          <span>恩佐斯焗饭</span><br />
          <span>豆瓣阅读作者 A共1作品</span><br />
          <span>2021-04-15发表第一篇作品。</span><br />
          <span>梦里大唐，梦里长安</span><br />
        </div>
        <a href="">
          <div class="right d-flex">
            <img src="/img/tx.jpg" alt="" />
          </div>
        </a>
      </div>
    </div>
    <!-- 讨论 -->
    <div class="tl">
      <div>讨论(25)</div>
    </div>
    <ul>
      <li>
        <div class="photo1">
          <a href="">
            <img src="/img/pl1.jpg" alt="" /><span class="wm">矢明</span><br />
            <span class="pl">呜呜呜呜呜呜好好看！我要催更！</span>
          </a>
        </div>
      </li>
      <li>
        <div class="photo1">
          <a href="">
            <img src="/img/pl1.jpg" alt="" /><span class="wm">矢明</span><br />
            <span class="pl">呜呜呜呜呜呜好好看！我要催更！</span>
          </a>
        </div>
      </li>
      <li>
        <div class="photo1">
          <a href="">
            <img src="/img/pl1.jpg" alt="" /><span class="wm">矢明</span><br />
            <span class="pl">呜呜呜呜呜呜好好看！我要催更！</span>
          </a>
        </div>
      </li>
      <li>
        <div class="photo1">
          <a href="">
            <img src="/img/pl1.jpg" alt="" /><span class="wm">矢明</span><br />
            <span class="pl">呜呜呜呜呜呜好好看！我要催更！</span>
          </a>
        </div>
      </li>
    </ul>
  </div>
   
</template>

<script>
  export default{
    data() {
      return {
        id:'',
        text:{title:''} ,
        textPage:1,// 统共页数，默认为1
        currentPage: 1, //当前页数 ，默认为1
        pageSize: 1, // 每页显示数量
        currentPageData: [] ,//当前页显示内容
        ok:false,
        ok1:false
      }
    },

    mounted(){
      //向服务器发请求，返回原创书各章节数据
      this.axios.get('/bookmi/book1').then(res=>{
          // console.log(res.data);
          this.text=res.data
          // console.log(this.text)
          // 计算一共有几页,这里如果使用ParseInt向下取整的话，那么剩下的数据将无法显示？应该使用向上取整？
       this.textPage =parseInt(this.text.length/this.pageSize)
      //  console.log(this.text.length);
        // 计算得0时设置为1
        this.textPage = this.textPage = 0 ? 1 : this.textPage;
        this.setCurrentPageData();
      })
    },
    methods: {
    setCurrentPageData() {
      let begin = (this.currentPage-1) * this.pageSize;
      let end = this.currentPage * this.pageSize;
      this.currentPageData = this.text.slice(begin,end);
      // console.log(this.currentPageData,this.currentPage)
    },
    //当点击上一篇时 
      prev(){
        console.log(this.currentPage);
        if (this.currentPage == 1) return;
            
         this.currentPage--;
         this.setCurrentPageData();
         window.scrollTo(0,0)
      },
       prev1(){
          this.ok=true;
          setTimeout(()=>{this.ok=false;},1000)
      },
    //当点击下一篇时
      next(){ 
        if (this.currentPage == this.textPage)return;
             this.currentPage++;
             this.setCurrentPageData();
             window.scrollTo(0,0)
      },
       next1(){
             this.ok1=true;
             setTimeout(()=>{this.ok1=false},1000)
     },
    },     
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.container-fluid {
  padding-right: 0;
  padding-left: 0;
  background-color: #f8f9f9;
}
.part {
  width:100%;
  background-color: #eff2f3;
  position:fixed;
  top:50px;
  z-index:10;
}
.center {
  width: 752px;
  margin: 0 auto;
  padding: 9px 0;
  z-index:10;
}
.center img {
  width: 20px;
  height: 30px;
  margin-right: 4px;
}
.wenzi > div:first-child {
  color: #389eac;
  font-weight: 1000;
  font-size: 13px;
  line-height: 1px;
  margin-top: 6px;
}
.wenzi:hover {
  text-decoration: none;
}
.wenzi > div:last-child {
  color: #a6a6a6;
  font-size: 12px;
  margin-top: 6px;
}
.right {
  /* line-height:50px; */
  align-items: center;
}
.right > div:first-child {
  border-right: 1px solid #ddd;
  color: #a6a6a6;
  font-size: 12px;
  line-height: 2;
  padding-right: 15px;
}
.right a {
  color: #389eac;
  font-size: 12px;
  margin: 0 20px;
}
.right a:hover {
  text-decoration: none;
}
.right button {
  width: 56px;
  height: 30px;
  background: #389eac;
  border: none;
  color: #fff;
  box-shadow: 1px 1px 3px 0 rgb(0, 0, 0 / 20%);
  padding: 0 15px;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
}
.zwq {
  padding-top: 70px;
  position: relative;
}
h1 {
  width: 680px;
  height: 47px;
  font-size: 36px;
  font-weight: bold;
  color: #333;
  margin: 0 auto;
  margin-top:150px;
}
.author {
  width: 680px;
  margin: 0 auto;
  margin-top: 5px;
}
.author img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.author > :nth-child(2) {
  color: #389eac;
  margin-right: 5px;
  font-size: 12px;
  line-height: 1.2;
}
.author > span:last-child {
  color: #a6a6a6;
  font-size: 12px;
  line-height: 1.2;
  padding-right: 15px;
}

.zw {
  width: 680px;
  font-size: 16px;
  margin: 0 auto;
}
.zw p{
  margin-bottom:40px;
  display: block;
}
.zw > p:first-child {
  margin-top: 90px;
}
.deadline {
  width: 680px;
  margin: 0 auto;
}
.deadline > :first-child {
  padding-top: 14px;
  font-size: 12px;
  padding: 0px 13px 0px 0px;
}
.deadline > :nth-child(n + 2) {
  color: #a6a6a6;
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 0;
}
.deadline > p:last-child {
  padding-left: 11px;
  margin-bottom: 50px;
}
.xiabian {
  font-size: 12px;
  position: fixed;
  right: 5px;
  top: 372px;
}
.xiabian > div span {
  color: #389eac;
}
.xiabian > div:first-child span {
  position: absolute;
  top: 9px;
  left: 32px;
}
.xiabian > div:nth-child(2) span {
  position: absolute;
  top: 9px;
  left: 32px;
}
.xiabian > div:nth-child(3) span {
  position: absolute;
  top: 9px;
  left: 10px;
}
.xiabian > div:nth-child(4) span {
  position: absolute;
  top: 9px;
  left: 15px;
}
.xiabian img {
  position: absolute;
  top: 5px;
  right: 15px;
}
.xiabian div {
  position: relative;
  border: none;
  width: 110px;
  height: 40px;
  border-radius: 20px;
  background-color: #eff2f3;
  margin-bottom: 10px;
  outline: none;
  z-index: -250;
  visibility: hidden;
}
.xiabian a:hover {
  text-decoration: none;
}
.navr {
  position: fixed;
  right: 15px;
  top: 320px;
  z-index:20;
}
.navr .left {
  visibility: hidden;
}
.d-flex:hover .left {
  visibility: visible;
}
.navr div:first-child span {
  color: #a6a6a6;
  font-size: 12px;
  line-height: 2.5;
}
.navr .d-flex img {
  margin-right: 5px;
  margin-bottom: 20px;
}
.anniu{
   position:fixed;
   top:376px;
   right:15px;
   z-index:20;
}
.anniu>div{
  margin-bottom:22px;
} 
.talk {
  width: 680px;
  height: 61px;
  background-color: #fff;
  padding: 20px 30px;
  margin-bottom: 50px;
  box-shadow: 3px 3px 7px #ddd;
  border-radius: 10px 10px 0 0;
  margin: 0 auto;
}
.talk h5 {
  font-weight: bold;
  font-size: 16px;
}
.zz2 {
  width: 680px;
  height: 68px;
  margin: 0 auto;
  padding: 0 30px;
  border-radius: 0 0 10px 10px;
  background-color: #fff;
  box-shadow: 3px 7px 7px #ddd;
}
.zz2 :hover {
  text-decoration: none;
}
.zz2 img {
  width: 40px;
  height: 40px;
}
.wz2 :first-child {
  font-weight: bold;
  font-size: 14px;
}
.syq {
  font-size: 14px;
  color: #333;
  margin-left: 10px;
}
.wenzi2 {
  margin-bottom: 5px;
  margin-left: 10px;
}
.wenzi2 span {
  color: #333;
}
.wenzi2 span:nth-child(1) {
  margin-right: 5px;
  font-size: 14px;
  font-weight: bold;
}
.wenzi2 span:nth-child(2) {
  background: #f9c300;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  margin-right: 5px;
}
.wenzi2 span:nth-child(3) {
  color: grey;
  font-size: 12px;
}
.sh {
  margin: 60px 0;
}
.sh > div:first-child {
  margin-right: 50px;
}
.sh > div:first-child div {
  text-align: center;
  font-size: 12px;
  margin-top: 3px;
  color: #333;
}
.sh > div:nth-child(2) div {
  text-align: center;
  font-size: 12px;
  margin-top: 3px;
  color: #333;
}
.sh a {
  text-decoration: none;
}

.button{
  padding-left: 610px;
  margin:0 auto;
}
.button a {
  display:inline-block;
  text-align:center;
  width: 339.2px;
  height: 40px;
  border: none;
  box-shadow: 3px 3px 7px #ddd;
  background-color: #fff;
}
.button span{
   line-height:40px;
}
.syp:hover{
  background-color: #389eac;
  color:white;
}
.xyp:hover{
   background-color: #389eac;
   color:white;
}
.tips {
  margin:0 auto;
  width: 250px;
  height: 70px;
  background-color: #333;
  opacity:0.85;
  color:#fff;
  text-align:center;
  border-radius:5px;
  position:fixed;
  top:250px;
  left:500px;
  z-index:10;
  
}
.tips span{
  line-height: 70px;
  font-size:14px;
}
.qh a {
  display: block;
  height: 40px;
  width: 150px;
}
.zlxx {
  width: 752px;
  height: 90px;
  margin: 0 auto;
  margin-top: 30px;
}
.zlxx > div:first-child {
  width: 100%;
  height: 30px;
  background-color: #eff2f3;
  color: #abc6cf;
  font-size: 12px;
  padding-left: 15px;
  line-height: 30px;
}

.smz {
  width: 752px;
  height: 60px;
  margin: 0 auto;
  margin: 0 96px;
  padding: 15px 0;
}
.zlxx img {
  width: 20px;
  height: 30px;
  margin-right: 4px;
}
.zz1 {
  width: 752px;
  margin: 0 auto;
}
.zz1 > div:first-child {
  width: 100%;
  height: 30px;
  background-color: #eff2f3;
  color: #abc6cf;
  font-size: 12px;
  padding-left: 15px;
  line-height: 30px;
  margin-bottom: 10px;
}
.zz1 img {
  width: 40px;
  height: 40px;
  margin-left: 250px;
}
.zz1 span:first-child {
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  color: #333;
}
.zz1 span:nth-child(3) {
  font-size: 12px;
}
.zz1 span:nth-child(n + 5) {
  font-size: 13px;
}
.zz1 > div > div {
  margin-left: 95px;
}
.tl {
  width: 752px;
  margin: 0 auto;
}
.tl > div:first-child {
  width: 100%;
  height: 30px;
  background-color: #eff2f3;
  color: #abc6cf;
  font-size: 12px;
  padding-left: 15px;
  line-height: 30px;
}
.photo1 {
  padding-top: 15px;
  width: 560px;
  height: 72px;
  margin: 0 auto;
  border-bottom: 1px solid #f4efe7;
}
.photo1 img {
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
.photo1 a {
  color: #333;
}
.photo1 a:hover {
  text-decoration: none;
}
.wm {
  margin-left: 10px;
  font-size: 12px;
}
.pl {
  margin-left: 40px;
  font-size: 13px;
}
</style>
